<template>
	<view style="background-color: #E6E6E6;">
		<view class="vip-head">
			<image src="../../../static/logo.png" mode="scaleToFill"></image>
			<view class="vip-head-name">
				<view>
					<text><b>达人</b></text>
					<text style="color: #CFB53B; margin-left: calc(3vh); padding: 0 calc(3vw) 0 calc(3vw); border: 1px #CFB53B solid; border-radius: calc(3vw);">未开通</text>
				</view>
				<view>
					<text style="color: #CFB53B;font-size: small;">会员说明</text>
					<uni-icons type="help" color="#CFB53B" size="15"></uni-icons>
				</view>
			</view>
		</view>
		<view class="vip-info back">
			<text style="text-align: center; height: calc(12.5vh); line-height: calc(12.5vh);"><b>开通会员尊享8大权益</b></text>
			<view>
				<view v-for="(item, index) in list1" :key="index" class="common-text-size">
					<image :src="item.img" mode="scaleToFill"></image>
					<text style="margin-top: calc(1vh);">{{item.name}}</text>
				</view>
			</view>
			<view>
				<view v-for="(item, index) in list2" :key="index" class="common-text-size">
					<image :src="item.img" mode="scaleToFill"></image>
					<text style="margin-top: calc(1vh);">{{item.name}}</text>
				</view>
			</view>
			<button @click="getVip" style="margin-bottom: calc(2vh);" type="default">立即开通￥399.00/年</button>
		</view>
		<view class="vip-list back">
			<view class="vip-list-title">
				<text>团队组建奖励</text>
			</view>
			<view class="vip-list-info common-text-size">
				<view class="vip-list-info-content-title">
					<view class="item text-center"><text>会员类型</text></view>
					<view class="item">招募奖励<br><text class="text-small">（会员免费）</text></view>
					<view class="item">抖音出单补贴<br><text class="text-small">（销售版）</text></view>
				</view>
				<view class="vip-list-info-content">
					<view class="item">直邀会员</view>
					<view class="item orange">40%</view>
					<view class="item orange">1.20%</view>
				</view>
				<view class="vip-list-info-content">
					<view class="item">非直邀会员</view>
					<view class="item orange">30%</view>
					<view class="item orange">0.80%</view>
				</view>
				<view style="padding: calc(2vh);">
					<text class="common-text-size" style="color: #999999;">
						备注：团队旗下所有成员满50人可升级为
						<text style="color: #007AFF;">【团队负责人】</text>
						享受跟多邀请权益，详情请咨询客服。
					</text>
				</view>
				<view id="ali-pay"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		data() {
			return {
				list1: [{
						name: "团队招募",
						img: "/static/logo.png"
					},
					{
						name: "带货补贴",
						img: "/static/logo.png"
					},
					{
						name: "抖音教程",
						img: "/static/logo.png"
					},
					{
						name: "社群交流资格",
						img: "/static/logo.png"
					}
				],
				list2: [{
						name: "商品链接",
						img: "/static/logo.png"
					},
					{
						name: "商品素材",
						img: "/static/logo.png"
					},
					{
						name: "商品视频",
						img: "/static/logo.png"
					},
					{
						name: "实物样品",
						img: "/static/logo.png"
					}
				]
			}
		},
		methods: {
			getVip() {
				this.$http({
					url: "/goods/pay?subject=Test&price=399.00&returnUrl=http://localhost:8080",
				}).then(response => {
					let data = response.data.msg;
					document.getElementById('ali-pay').innerHTML = data;
					document.forms[0].submit()
				})
			},
		},
		components: {
			uniIcons
		}
	}
</script>

<style>
	.common-text-size {
		font-size: 4vw;
	}

	.text-center {
		text-align: center;
		line-height: calc(7vh);
	}

	.text-small {
		font-size: small;
	}

	.vip-list {
		width: calc(90vw);
		margin: calc(2vh) calc(2vw) 0 calc(2vw);
		padding: calc(2vh) calc(3vw) calc(2vh) calc(3vw);
		border-radius: calc(4vw);
		display: flex;
		flex-direction: column;
	}

	.vip-list-title {
		height: calc(6vh);
		line-height: calc(6vh);
		text-align: center;
		border-bottom: #E6E6E6 1px solid;
	}

	.vip-list-info {
		display: flex;
		flex-direction: column;
	}

	.vip-list-info-content-title {
		height: calc(7vh);
		display: flex;
		text-align: center;
		border-bottom: #E6E6E6 1px solid;
	}

	.vip-list-info-content {
		height: calc(6vh);
		line-height: calc(6vh);
		display: flex;
		text-align: center;
		border-bottom: #E6E6E6 1px solid;
	}

	.vip-info {
		width: calc(96vw);
		margin: 0 calc(2vw) 0 calc(2vw);
		border-radius: calc(4vw);
		display: flex;
		flex-direction: column;
	}

	.item {
		flex: 1;
	}

	.vip-info>view {
		width: calc(96vw);
		height: calc(12.5vh);
		display: flex;
		flex-direction: row;
	}

	.vip-info>view>view {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.vip-info image {
		width: calc(15vw);
		height: calc(15vw);
		margin-left: calc(5vw);
	}

	.vip-info button {
		background-image: linear-gradient(to right, #ffff7f, #CFB53B);
		margin-top: calc(5vh);
	}

	.back {
		background-color: #FFFFFF;
	}

	.vip-head {
		padding: calc(2vh) calc(2vw) calc(3vh) calc(2vw);
		display: flex;
	}

	.vip-head image {
		width: calc(8vh);
		height: calc(8vh);
		border-radius: 50%;
	}

	.vip-head-name {
		flex: 4;
		margin: calc(2vh) calc(2vw) 0 calc(3vw);
		display: flex;
		justify-content: space-between;
	}

	.orange {
		color: orange;
	}
</style>
